<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        width: 1404px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
    }

    .calendar-container {
        max-width: 1400px;
        margin: 0 auto;
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .calendar-header {
        background: linear-gradient(135deg, #2c3e50, #34495e);
        color: white;
        text-align: center;
        padding: 30px;
    }

    .year-title {
        font-size: 3rem;
        font-weight: 300;
        margin-bottom: 10px;
    }

    .year-subtitle {
        font-size: 1.1rem;
        opacity: 0.8;
    }

    .months-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        padding: 40px;
    }

    .month {
        background: #fafafa;
        border-radius: 15px;
        padding: 20px;
    }

    .month-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .month-name {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-bottom: 10px;
    }

    .weekday {
        text-align: center;
        font-size: 0.9rem;
        font-weight: 600;
        color: #7f8c8d;
        padding: 8px 4px;
    }

    .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        border-radius: 8px;
        cursor: pointer;
    }

    .day:not(.other-month) {
        color: #2c3e50;
    }

    .day:not(.other-month):hover {
        background: #3498db;
        color: white;
    }

    .day.other-month {
        color: #bdc3c7;
    }

    .day.today {
        background: #e74c3c;
        color: white;
        font-weight: bold;
    }

    .day.weekend {
        color: #e74c3c;
    }

    .day.weekend.other-month {
        color: #f1c0c0;
    }

    @media (max-width: 768px) {
        .months-grid {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 20px;
        }

        .year-title {
            font-size: 2rem;
        }

        .calendar-header {
            padding: 20px;
        }
    }

    @media (max-width: 480px) {
        body {
            padding: 10px;
        }

        .month {
            padding: 15px;
        }

        .day {
            font-size: 0.8rem;
        }
    }

    .special-day {
        background: linear-gradient(135deg, #f9d423 0%, #ff4e50 100%);
        color: white !important;
        font-weight: bold;
        border: 2px solid #ff4e50;
        position: relative;
    }

    .special-day::after {
        content: "★";
        position: absolute;
        top: 4px;
        right: 6px;
        font-size: 0.8em;
        color: #fffbe6;
    }
</style>

<div class="calendar-container">
    <div class="calendar-header">
        <h1 class="year-title" id="currentYear"></h1>
        <p class="year-subtitle">光遇{{year}}年复刻历，星号标注为复刻日期，详情使用{{year}}年复刻记录查看</p>
    </div>
    <div class="months-grid" id="monthsGrid">
    </div>
</div>

<script>
    const specialDays = JSON.parse('{{@specialDays}}')
    const monthNames = [
        '一月', '二月', '三月', '四月', '五月', '六月',
        '七月', '八月', '九月', '十月', '十一月', '十二月'
    ];

    const weekdayNames = ['日', '一', '二', '三', '四', '五', '六'];

    function getCurrentYear() {
        return '{{@year}}'
    }

    function isToday(date, month, year) {
        const today = new Date();
        return date === today.getDate() &&
            month === today.getMonth() &&
            year === today.getFullYear();
    }

    function isWeekend(dayOfWeek) {
        return dayOfWeek === 0 || dayOfWeek === 6;
    }

    function generateCalendar(year) {
        const monthsGrid = document.getElementById('monthsGrid');
        const yearTitle = document.getElementById('currentYear');

        yearTitle.textContent = year;
        monthsGrid.innerHTML = '';

        for (let month = 0; month < 12; month++) {
            const monthDiv = document.createElement('div');
            monthDiv.className = 'month';

            // 月份标题
            const monthHeader = document.createElement('div');
            monthHeader.className = 'month-header';
            monthHeader.innerHTML = `<div class="month-name">${monthNames[month]}</div>`;

            const weekdaysDiv = document.createElement('div');
            weekdaysDiv.className = 'weekdays';
            weekdayNames.forEach(day => {
                const weekdayDiv = document.createElement('div');
                weekdayDiv.className = 'weekday';
                weekdayDiv.textContent = day;
                weekdaysDiv.appendChild(weekdayDiv);
            });

            const daysDiv = document.createElement('div');
            daysDiv.className = 'days';

            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const firstDayOfWeek = firstDay.getDay();
            const daysInMonth = lastDay.getDate();

            const prevMonth = new Date(year, month, 0);
            const daysInPrevMonth = prevMonth.getDate();

            for (let i = firstDayOfWeek - 1; i >= 0; i--) {
                const dayDiv = document.createElement('div');
                dayDiv.className = 'day other-month';
                dayDiv.textContent = daysInPrevMonth - i;
                daysDiv.appendChild(dayDiv);
            }

            for (let date = 1; date <= daysInMonth; date++) {
                const dayDiv = document.createElement('div');
                const currentDate = new Date(year, month, date);
                const dayOfWeek = currentDate.getDay();

                dayDiv.className = 'day';
                dayDiv.textContent = date;

                if (isWeekend(dayOfWeek)) {
                    dayDiv.classList.add('weekend');
                }

                const special = specialDays.find(d => d.month === month + 1 && d.day === date);
                if (special) {
                    dayDiv.classList.add('special-day');
                }

                daysDiv.appendChild(dayDiv);
            }

            const totalCells = daysDiv.children.length;
            const remainingCells = 42 - totalCells;

            for (let date = 1; date <= remainingCells; date++) {
                const dayDiv = document.createElement('div');
                dayDiv.className = 'day other-month';
                dayDiv.textContent = date;
                daysDiv.appendChild(dayDiv);
            }

            monthDiv.appendChild(monthHeader);
            monthDiv.appendChild(weekdaysDiv);
            monthDiv.appendChild(daysDiv);
            monthsGrid.appendChild(monthDiv);
        }
    }

    const currentYear = getCurrentYear();
    generateCalendar(currentYear);
</script>